<%@ include file="/common/taglibs.jsp"%>
<head>
<script type="text/javascript" src="<c:url value="/scripts/common.js"/>"></script>
<style type="text/css">
.cert {
	line-height: 25px;
	text-decoration: none;
	color: #ffffff;
	font-size:13px;
	background:#33cc33;
	margin-top:1px;
	text-align: center;
}
.cert:hover {
	background:#dddddd;
}
.cert a:hover {
	color:#dff;	
}
.cert a {
	color:#ffffff;	
}
.home_title {
	background:#6699ff;
	line-height:28px;
	color:white;
	font-family: bold;
}
.home_title span {
	padding-left:10px;
}
#cert_menu ul{
	list-style: none;
}
#cert_menu ul li{
	padding-left:45px;
	height:20px;
	line-height:20px;
	font-size:12px;
	display: none;
}
#cert_menu ul li:hover a{
	color:#6699ff;
}

#cert_menu div {
	padding-left:30px;
	height:25px;
	line-height:25px;
	color:#7d7d7d;
	font-size:13px;
}
#cert_menu div:hover {
	cursor:pointer;
	color:#6699ff;
}
#cert_menu  {
	margin-bottom:10px;
	border:1px #6699ff solid;
}

</style>

<script type="text/javascript">
$(function() {
	var aNods = $("ul > div");
	aNods.click(function() {
			var aNod = $(this);
			var liNods = aNod.nextAll("li");
			liNods.toggle(400);
		});
})
</script>
</head>

<div>
	<div style="width:180px;min-height:100px; float:left;">
		
		<div id="cert_menu">
			<div style="background:#6699ff;height:30px;line-height:30px;font-size:14px;padding-left:20px;color:#ffffff">
				<fmt:message key="product.world.cert"/>
			</div>
			<c:forEach items="${category}" var="c">
				<ul>
					<div>${c.name}</div>
				 	<c:forEach items="${c.certs}" var="cert">
				 		<li><a onclick="getCertData(this, ${cert.id})">${cert.name}</a></li>
				 	</c:forEach>
			 	</ul>
			</c:forEach>
		</div>
		<jsp:include page="/common/contact_nav.jsp" flush="true"></jsp:include>
	</div>
	<div style="float:right; width:755px;min-height:515px;background:#fafafa;">
		<img alt="" src="/images/QQ.png" width="755px">
		<div style="line-height:25px;background-image:url(/images/title_bg2.jpg);width:755x;height:25px">
			<span id="cert_name" style="padding-left:10px"></span>
		</div>
		<div style="margin-top:10px">
			<div style="text-align:center;line-height:24px;background:#69f;color:#fff;width:100px">
				<fmt:message key="cert.introduce"/>
			</div>
			<div style="height:3px;background:#69f"></div>
			<div id="cert_introduce" style="padding:10px"></div>
		</div>
		
		<div style="margin-top:10px">
			<div style="text-align:center;line-height:24px;background:#69f;color:#fff;width:100px">
				<fmt:message key="cert.process"/>
			</div>
			<div style="height:3px;background:#69f"></div>
			<div id="cert_process" style="padding:10px">
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		getPageData();
		function getPageData(){
		 	var passUrl = '<c:url value="/app/cert/certs.json"/>';
		 	var id = '${cert_id}';
		 	if (id == '') 
		 		id = 1;
			var passData = 'id=' + id;
			createAjax(passUrl, passData, resetPageData); 
		}
		
		function resetPageData(data) {
			var obj = eval(data);
			var cert = obj.cert;
			$('#cert_name').html(cert.name);
			$('#cert_introduce').html(cert.introduce);
			$('#cert_process').html(cert.process);
		}
		
		function getCertData(ele, id) {
			var passUrl = '<c:url value="/app/cert/certs.json"/>';
			var passData = 'id=' + id;
			createAjax(passUrl, passData, resetPageData); 
			$('#cert_menu a').each(function() {
				$(this).css("color", "#494949");
			})
			ele.style.color = "#6699ff";
		}
		
	</script>
</div>